<script setup>
import {onBeforeMount, onMounted, shallowRef} from "vue";
import {useDark, useToggle} from "@vueuse/core/index";
import MyIcon from "@/components/MyIcon.vue";
import {MINIO_HOST} from "@/const";
import MyList from "@/components/MyList";
import router from "@/router";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import {dateFormat, genderFormat} from "@/util";

let vuex = useStore();

/* ==================== 退出登录 ==================== */
function logout(){
  sessionStorage.clear();
  vuex.dispatch('setLoginFlag',false);
  ElMessage.success('退出成功!');
  router.push('/');
}
/* ==================== 权限菜单 ==================== */

// 当前选中权限的index值
let currentMenuIndex = shallowRef('/DashBoard');
// 左侧权限列表是否折叠
const isCollapse = shallowRef(false);
// 当前登录的会员的权限列表
const permissions = formatPermissions(JSON.parse(sessionStorage.getItem('loginPermissions')));

console.log(permissions)
// 根据localStorage判断，当前是否正在使用暗黑模式
const currentTheme = shallowRef(localStorage.getItem('vueuse-color-scheme') === 'auto')
// 切换暗黑模式和默认模式
const toggleTheme = useToggle(useDark());


/* ==================== 员工信息 ==================== */
const emp = JSON.parse(sessionStorage.getItem('loginEmp'));

let avatar = MINIO_HOST + '/avatar/' + emp['avatar'];

const empInfoDrawer = shallowRef();
function openempInfoDrawer() {
  empInfoDrawer.value = true;
}
//列表项
let empInfoItems = [
  {'label': '员工性别', 'value': emp['gender'], 'type': 'tag', 'format': genderFormat},
  {'label': '员工年龄', 'value': emp['age']},
  {'label': '所在省份', 'value': emp['province']},
  {'label': '详细地址', 'value': emp['address']},
  {'label': '邮箱地址', 'value': emp['email']},
  {'label': '真实姓名', 'value': emp['realname']},
  {'label': '手机号码', 'value': emp['phone']},
  {'label': '微信号码', 'value': emp['wechat']},
  {'label': '身份证号', 'value': emp['idcard']},
  {'label': '入职时间', 'value': emp['hiredate'],'format': dateFormat},
  {'label': '创建时间', 'value': emp['created'],'format': dateFormat},
  {'label': '修改时间', 'value': emp['updated'],'format': dateFormat},
  {'label': '员工描述', 'value': emp['info'], 'type': 'card'},
];


/* ==================== 项目信息 ==================== */
const ProjectInfoDrawer = shallowRef();
function openProjectInfoDrawer() {
  ProjectInfoDrawer.value = true;
}
//列表项
let projectInfoItems = [
  {'type': '', 'label': '项目简介', 'value': 'MyClub管理系统是基于SpringBoot开发的，旨在提供一个全面而高效的管理平台。\n' +
        '通过该系统，管理员可以轻松管理俱乐部的课程安排、学员信息、教师信息以及其他相关资源。\n' +
        '学员可以方便地查看课程信息、完成作业和考试，并与教师进行互动。\n' +
        '教师可以便捷地发布课程内容、评估学员表现，并与学员及管理员进行沟通交流。\n' +
        '系统还提供了多种功能模块，包括课程管理、学员管理、教师管理、作业管理、考试管理等，\n' +
        '以满足不同用户的需求。\n' +
        '同时，系统具有良好的可扩展性和稳定性，为俱乐部的管理和运营提供了可靠的支持。'},
  {'type': '', 'label': '操作系统', 'value': 'Windows(11)'},
  {'type': '', 'label': '开发工具箱', 'value': 'JDK(11.0.16.1)'},
  {'type': '', 'label': '集成开发环境', 'value': 'IntelliJ IDEA(2021.3.3 Ultimate Edition)'},
  {'type': '', 'label': '项目管理工具', 'value': 'Maven(3.6.0)'},
  {'type': '', 'label': '版本控制工具', 'value': 'Git(2.28.0.windows.1) + GitEE'},
  {'type': '', 'label': '前端服务器', 'value': 'Node(16.14.0)'},
  {'type': '', 'label': '前端浏览器', 'value': 'Edge(120.0.2210.77)'},
  {'type': '', 'label': '虚拟机管理工具', 'value': 'VmWare(16.2.1 build-18811642)'},
  {'type': '', 'label': '虚拟操作系统', 'value': 'Euler(2203)'},
  {'type': '', 'label': '容器化管理引擎', 'value': 'Docker(18.09.0)'},
  {'type': '', 'label': '数据存储', 'value': 'MySQL(8.0.25)'},
  {'type': '', 'label': '对象存储', 'value': 'MinIO(RELEASE.2023-08-31T15-31-16Z)'},
];


/* ==================== 系统日历 ==================== */

// 抽屉
const calendarDrawer = shallowRef();
// 当前时间
let now = shallowRef(new Date());

// 打开抽屉
function openCalendarDrawer() {
  calendarDrawer.value = true;
}
/*
* [
*   {id: 1, name: '111', pid: 0},
*   {id: 2, name: '111', pid: 0},
*   {id: 3, name: '111', pid: 1},
*   {id: 4, name: '111', pid: 1},
* ]
*
* [
*   {id: 1, name: '111', pid: 0, sub: [
*      {id: 3, name: '111', pid: 1},
*      {id: 4, name: '111', pid: 1},
*   ]},
*   {id: 2, name: '111', pid: 0},
* ]
*
* */
function formatPermissions(permissions) {
  let fuPermissions = [];
  let ziPermissions = [];
  for (let i in permissions) {
    let permission = permissions[i];
    if (permission['pid'] === 0) {
      permission['subPermissions'] = [];
      fuPermissions.push(permission);
    } else {
      ziPermissions.push(permission)
    }
  }
  for (let i in ziPermissions) {
    for (let j in fuPermissions) {
      if (ziPermissions[i]['pid'] === fuPermissions[j]['id']) {
        fuPermissions[j]['subPermissions'].push(ziPermissions[i]);
        break;
      }
    }
  }
  return fuPermissions;
}

onBeforeMount(()=>{
  /* ==================== 登录保护 ==================== */
  if (!vuex.state['loginFlag']) {
    ElMessage.warning('请先登录');
    setTimeout(function () {
      router.push('/');
    }, 2000);
  }
})

/* ==================== onMounted ==================== */

// 暗黑模式
onMounted(() => useToggle(useDark()));
</script>

<template>
  <el-container class="main-body">
    <el-aside class="main-body-left" width="collapse" max-width="200px">
      <el-menu class="permissions-menu el-menu-vertical-demo" unique-opened router
               :collapse="isCollapse"
               :default-active="currentMenuIndex">
        <el-image class="logo" :src="require('../assets/image/logo.jpg')"/>

        <!--DashBoard-->
        <el-menu-item class="house-item" index="/DashBoard" title="回到后台项目首页">
          <template #title>
            <my-icon icon="House" label="首页DashBoard"/>
          </template>
        </el-menu-item>

        <!--遍历父权限-->
        <el-sub-menu class="permissions"
                     v-for="(permission, i) in permissions" :key="permission['id']"
                     :index="i.toString()" :title="permission['info']">
          <template #title>
            <my-icon :icon="permission['icon']" :label="permission['title']"/>
          </template>
          <!--遍历子权限-->
          <el-menu-item class="sub-permissions"
                        v-for="subPermission in permission['subPermissions']" :key="subPermission['id']"
                        :index="subPermission['url']" :title="subPermission['info']">
            <my-icon :icon="subPermission['icon']" :label="subPermission['title']"/>
          </el-menu-item>

        </el-sub-menu>

      </el-menu>
    </el-aside>

    <el-container class="main-body-right">
      <el-header class="main-body-right-head">
        <el-row class="is-align-middle">
          <el-col class="fold-expand" :span="2">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="!isCollapse">
                <my-icon size="20" :icon="!isCollapse ? 'Fold' : 'Expand'"/>
              </el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col class="project-title" :span="7">
            <h2>MyClub后台管理子系统</h2>
          </el-col>

          <el-col class="operation-btn" :span="6" :offset="7">
            <el-divider direction="vertical"/>
            <el-button icon="search" @click="()=>ElMessage.warning('暂未开发！')" size="small" round/>
            <el-button icon="bell" @click="()=>ElMessage.warning('暂未开发！')" size="small" round/>
            <el-button icon="list" title="项目信息" @click="openProjectInfoDrawer" size="small" round/>
            <el-button icon="calendar" title="系统时间" @click="openCalendarDrawer" size="small" round/>
            <el-divider direction="vertical"/>
            <el-switch class="theme-switch" v-model="currentTheme" @change="toggleTheme()" inline-prompt
                       title="开启暗黑模式"/>
            <el-divider direction="vertical"/>
          </el-col>

          <el-col class="emp-realname-col" :span="1" v-if="emp['realname']">
            {{ emp['realname'] }}
          </el-col>
          <el-col class="emp-avatar-col" :span="1" v-if="emp['avatar']">

            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-avatar class="emp-avatar" :size="45" :src="avatar"/>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="InfoFilled" @click="router.push('/Personal')">
                    查看信息
                  </el-dropdown-item>
                  <el-dropdown-item icon="InfoFilled" @click="router.push('/PersonalUpdate')">
                    修改信息
                  </el-dropdown-item>
                  <el-dropdown-item icon="InfoFilled" @click="router.push('/UpdatePassword')">
                    修改密码
                  </el-dropdown-item>
                  <el-dropdown-item icon="InfoFilled" @click="() => router.push('/')">
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </el-col>

        </el-row>
      </el-header>
      <el-main class="main-body-right-main">
        <router-view/>
      </el-main>
    </el-container>
    <!--日历抽屉-->
    <el-drawer title="当前时间" v-model="calendarDrawer" size="50%">
      <el-calendar v-model="now"/>
    </el-drawer>
    <!--项目信息-->
    <el-drawer title="项目信息" v-model="ProjectInfoDrawer" size="50%">
      <my-list title="项目信息"  :items="projectInfoItems"></my-list>
    </el-drawer>
    <!--员工信息-->
    <el-drawer title="员工信息" v-model="empInfoDrawer" size="50%">
      <my-list title="员工信息"  :items="empInfoItems"></my-list>
    </el-drawer>
  </el-container>


</template>

<style scoped lang="scss">
.main-body-left {

  height: 100vh; // 高度
  border-right: 1px solid #cccccc; // 右边框

  .logo {
    padding: 10px; // 内边距
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px; // 宽度
    height: 100vh; // 高度
    letter-spacing: 2px; // 字间距
  }

  .el-icon {
    margin: 0 10px; // 上下外边距 左右外边距
  }
}

.main-body-right-head {

  .avatar-img {
    margin: 10px; // 外边距
    outline: 1px solid #854040; // 边框
    border: 1px solid #854040; // 边框
  }
}

.main-body-left {

  height: 100vh; // 高度
  border-right: 1px solid #cccccc; // 右边框

  .logo {
    padding: 10px; // 内边距
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px; // 宽度
    height: 100vh; // 高度
    letter-spacing: 2px; // 字间距
  }

  .el-icon {
    margin: 0 10px; // 上下外边距 左右外边距
  }
}

.main-body-right-head {

  .emp-realname-col {
    text-align: right; // 右对齐
    height: 50px; // 高度
    display: inline-block; // 内联块
    text-shadow: 2px 2px 2px gray; // 文字阴影
    line-height: 50px;
  }

  .emp-avatar-col {
    text-align: right; // 右对齐
  }

  .emp-avatar {
    margin: 10px; // 外边距
    outline: 1px solid #854040; // 边框
    border: 1px solid #854040; // 边框
  }
}
</style>